/**
	FloatingWindow class.
	
	Params
	initContent: initial content
	title: string - Window title
	frameId: id value for the main div ( default window-border )
	contentId: id value for the content div ( default floating-frame-content ) 
	width: e.g '200px'
	height: e.g '200px' 
	top: eg. '10px' ( default center of viewport )
	left: eg. '10px' ( default center of viewport )
	dragable: boolean (default true)
	dropShadow: boolean (default true)
	
	E.g of output:
	<div id="window-border" class="floating-frame" style="width: 350px; height: 440px; display: none;"> 
		<div class="drop-shadow"></div>
		<div class="floating-frame-content">
			<div class="floating-window-title"></div>
			<div id="floating-frame-content" style="padding: 10px"></div>
		</div>
		<a id="window-close" href="javascript:;" onclick=""></a>
	</div>
	
*/
function FloatingWindow(params) {
	if (!params) {
		this.params = {}; 
	} else { 	
		this.params = params;
	}
	
	if (typeof(this.params.dragable) == 'undefined') {
		this.params.dragable = true;
	}
	if (typeof(this.params.dropShadow) == 'undefined') {
		this.params.dropShadow = true;
	}
	
	if (typeof(this.params.contentId) == 'undefined') {
		this.params.contentId = 'floating-frame-content';
	}
	
	this.frameElem = null;
	this.titleElem = null;
	this.dragableObj = null;	
	this.bgOverlayElem = null;
	var _this = this;
	this.keyEventCallback = function(e) { _this.keyEvent(e, _this)};
	
}

FloatingWindow.prototype.init = function() {
	if ( this.frameElem ) { return };
				 
	this.frameElem = new Element('div', {
		id:	(this.params.frameId || 'window-border'),
		className: 'floating-frame'
	});
	    
	if (this.params.width) {
		this.frameElem.style.width = this.params.width;
	}
	
	if (this.params.height) {
		this.frameElem.style.height = this.params.height;
	}
		    
	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
	if (this.params.dropShadow && !IE6) {		
		this.frameElem.appendChild(new Element('div', {className: 'drop-shadow'}));
	}
	
	var contentPane = new Element('div', {className: 'floating-frame-content'});
	
	if (this.params.title) {
		this.titleElem = new Element('div', {
			'class' : 'floating-window-title' 
		}).update(this.params.title);
		contentPane.appendChild(this.titleElem);
	}
	
	contentPane.appendChild(new Element('div', {
		id: this.params.contentId
	}).update((this.params.initContent || '')).setStyle({padding: '10px'}));

	this.frameElem.appendChild(contentPane);
	
	var a = this.frameElem.appendChild(new Element('a',{
		id: 'window-close',
		href: 'javascript:;'
	}));
	var _this = this;
	a.onclick = function() {_this.hide();} 
}

/**
	Shows the window
	Params
	useFadeEffect: boolean
	title: title
	content: content
	url: url for getting ajax content
	ajaxoptions: params for ajax request object, eg method, parameters etc. 
	modal: boolean
*/
FloatingWindow.prototype.show = function(params) {
	if (!this.frameElem) { this.init(); }
	if (!params) { params = {}; }
	
	if (params.modal && !$('background-overlay')) {
		this.bgOverlayElem = new Element('div',{
			id: 'background-overlay',
			className: 'background-overlay',
		});	
		this.bgOverlayElem.style.height = document.body.getHeight() + 'px';
		document.body.appendChild(this.bgOverlayElem);
	}
	
	if (params.url && !$(this.frameElem.id)) {
		this.doAjaxRequest(params);
		return;
	}

	if (!$(this.frameElem.id)) { 
		document.body.appendChild(this.frameElem);
	}
	
	if (params.content) {
		$(this.params.contentId).innerHTML = params.content;
	}
	
	if (params.title) {
		if (!this.titleElem) {
			this.titleElem = new Element('div', {
				className : 'floating-window-title' 
			});
			$(this.params.contentId).parentNode.insertBefore(this.titleElem, $(this.params.contentId));
		}
		
		this.titleElem.update(params.title);
	}
	
	if (params.useFadeEffect) {
		Effect.Appear(this.frameElem.id, {duration: 1.0});
	} else {
		$(this.frameElem.id).show();
	}

	setCenterOfViewport(this.frameElem);

	if (this.params.dragable && !this.dragableObj && !params.modal) {
		this.dragableObj = new Draggable(this.frameElem.id, {});
	} 	
	
	Event.observe(document, 'keydown', this.keyEventCallback);
}

FloatingWindow.prototype.showProgress = function() {
	if ($('window-progress')) {
		return;
	}
	
	var elem = new Element('div', {
		id: 'window-progress',
		className: 'window-progress'
	});
	
	elem.appendChild(new Element('img', {
		src: '/themes/icestorm/images/indicator_medium.gif',
		alt: 'loading'
	}));
	document.body.appendChild(elem);
	setCenterOfViewport(elem);
	elem.show();
}

FloatingWindow.prototype.hideProgress = function() {
	if ($('window-progress')) {
		$('window-progress').remove();
	}
}

FloatingWindow.prototype.doAjaxRequest = function(params) {
	this.showProgress();
	var url = params.url; 
	delete params.url;
	
	if (!params.ajaxoptions) { 
		params.ajaxoptions = {};
	}
	
	var _this = this;
	params.ajaxoptions.onSuccess = function(transport) {
		params.content = transport.responseText;
		_this.hideProgress(); 
		_this.show(params);		
	};
	
	new Ajax.Request(url, params.ajaxoptions);
}

/**
	Hides the window.
	(removes itself from the DOM)
*/
FloatingWindow.prototype.hide = function() {
	if ($('background-overlay')) {
		document.body.removeChild(this.bgOverlayElem);
	}
	document.body.removeChild(this.frameElem);
	this.frameElem.style.display = 'none'; //we do this if it will be shown again.

	Event.stopObserving(document, 'keydown', this.keyEventCallback);
}

/*
	KeyEvent that listens to ESC and hides the window
*/
FloatingWindow.prototype.keyEvent = function(event, obj) {
	var keyCode = event.which;	

	if (keyCode == Event.KEY_ESC) {
		obj.hide();
	}
}

